<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>国学小书童</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/public.css">
</head>

<body>
    <!-- 模态框（Modal） -->
    <div class="modal fade bs-example-modal-lg" id="license" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div>
                </div>
                <div class="modal-body text-center">
                    <img src="img/license.png" style="width: 600px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--  -->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div>
                </div>
                <div class="modal-body text-center">
                    <img src="img/gongzhongcrcode.jpg" alt="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--  -->
    <!-- modal  register -->
    <div class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" id='register'>
        <div class="modal-dialog  bs-example-modal-lg" role="document">
            <div class="modal-content register ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"> ×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div>
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <span class="registerMes">
                                    &nbsp;
                                    <!-- 注册失败，请重新注册 -->
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label">账号:</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="inputUsername" maxlength="30" name="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-2 col-xs-offset-2 control-label">密码:</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control a" id="inputPassword" placeholder=" " maxlength="16" name="psw">
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0px;">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" class="form-control zhuce btn btn-primary" id="zhuce">注 册</button>
                            </div>
                        </div>
                          <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6 text-right link-a">
                                <a>登录</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- modal  login -->
    <div class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" id='login'>
        <div class="modal-dialog  bs-example-modal-lg" role="document">
            <div class="modal-content register ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"> ×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div>
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6 loginmsg">
                                &nbsp;
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label">账号:</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="loginUsername" maxlength="30">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-2 col-xs-offset-2 control-label">密码:</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="loginPassword" placeholder=" " maxlength="16">
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom: 0px;">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" class="form-control zhuce btn btn-primary" id="denglu">登 录</button>
                            </div>
                        </div>
                          <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6 text-right link-a">
                                <a>注册</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <div class="detail-warp">
        <div class="detail-warp2">
            <navbar>
                <div class="container ">
                    <div class="row">
                        <div class="navbar-heade pull-right">
                            <ul class="navbar-nav ">
                                <li class="hearder-List my-hide" section="NotloginSection">
                                    <a data-target="#login" data-toggle="modal" class="hearder-login">
                                    <img src="img/index-denglu1.png" alt="登录" class="ico"> 登录 </a>
                                </li>
                                <li class="hearder-List hearder-zhuce my-hide" section="NotloginSection">
                                    <a data-target="#register" data-toggle="modal">
                                    <img src="img/index-zhuce1.png" alt="注册" class="ico"> 注册 </a>
                                </li>
                                <li class="hearder-List my-hide" section="loginSection">
                                    <a id="usernameLink"></a>
                                </li>
                                <li class="hearder-List ">
                                    <a data-target="#myModal" data-toggle="modal">
                                    <img src="img/index-guanzhu1.png" alt="关注" class="ico"> 关注 </a>
                                </li>
                                <li class="hearder-List my-hide" section="loginSection">
                                    <a id="logout">
                                    <img src="img/index-loginout.png" alt="关注" class="ico"> 退出 </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6 ">
                            <img src="img/index-shener.png" alt="" style="width:50px;height:50px;">
                            <span class="header-title"> &nbsp; 深圳市泽慧文化传播有限公司</span>
                        </div>
                        <div class="col-xs-2"> </div>
                        <div class="col-xs-6 ">
                            <ul class="navbar-nav  aa">
                                <li class="hearder-List2">
                                    <a href="index.html">
                                    首页 </a>
                                </li>
                                <li class="hearder-List2">
                                    <a href="detail.html">国学小书童 </a>
                                </li>
                                <li class="hearder-List2">
                                    <a href="about.html">
                                    关于我们 </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </navbar>
            <!-- detail-title -->
            <div class="detail-title">
                <div class="container">
                    <img src="img/detail/detail-title1.png" alt="" class="pull-left detail-title1">
                    <img src="img/detail/detail-title2.png" alt="" class="pull-right detail-title2">
                </div>
            </div>
            <!-- list -->
            <div class="detail-list">
                <div class="container">
                    <div class="row">
                        <ul>
                            <li class="col-xs-4 text-center">
                                <img src="img/detail/detail-list1.png" alt="" class="detail-listPic">
                                <h3 class="detail-listDes">童蒙养正</h3>
                                <p>TONGMENGYANGZHENG</p>
                            </li>
                            <li class="col-xs-4 text-center">
                                <img src="img/detail/detail-list2.png" alt="" class="detail-listPic">
                                <h3 class="detail-listDes">艺术熏陶</h3>
                                <p>Y U S H U X U N T A O</p>
                            </li>
                            <li class="col-xs-4 text-center">
                                <img src="img/detail/detail-list3.png" alt="" class="detail-listPic">
                                <h3 class="detail-listDes">精彩推荐</h3>
                                <p>J I N G C A I T U I J I A N</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- main1 -->
            <div class="detail-main1">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-2 col-md-offset-8  detail-main1Text"> — 童 蒙 养 正 — </div>
                    </div>
                    <div class="row">
                        <div class="detail-main1Des col-xs-6">
                            <h1>童蒙养正</h1>
                            <p>&nbsp;&nbsp;TONGMENGYANGZHENG</p>
                            <p>《弟子规》《三字经》《千字文》</p>
                        </div>
                        <div class="col-xs-6">
                            <img src="img/detail/detail-main1pic.png" alt="" class="pull-right">
                        </div>
                    </div>
                </div>
            </div>
            <!-- main2 -->
            <div class="detail-main1">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-2 col-md-offset-8  detail-main1Text">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6 mainpic">
                            <img src="img/detail/detail-main2pic.png" alt="" class="pull-left">
                        </div>
                        <div class="detail-main1Des col-xs-6 ">
                            <h1>《弟子规》</h1>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D &nbsp;&nbsp;I&nbsp;&nbsp; Z &nbsp;&nbsp;I&nbsp;&nbsp; G&nbsp;&nbsp; U&nbsp;&nbsp; I</p>
                            <div class="detail-main1article">&nbsp;&nbsp;&nbsp;&nbsp; 《弟子规》，儒家童蒙经典之一。一部以学规形式对年幼学子进行学习指导和品行修养教育的启蒙读物，依次讲解了如何对待父母、兄弟、长辈,如何为人处世,如何读书求学的道理.</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- main3 -->
            <div class="detail-main1">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-2 col-md-offset-8  detail-main1Text">
                        </div>
                    </div>
                    <div class="row">
                        <div class="detail-main1Des col-xs-6  ">
                            <h1>《三字经》</h1>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;S &nbsp;&nbsp;A&nbsp;&nbsp;N &nbsp;&nbsp;Z&nbsp;&nbsp; Z&nbsp;&nbsp; J&nbsp;&nbsp; I&nbsp;&nbsp;N&nbsp;&nbsp;G</p>
                            <div class="detail-main1article">&nbsp;&nbsp;&nbsp;&nbsp; 《三字经》，儒家蒙学经典，其内容上自天文地理，下至诸子百家，内容丰富，包罗万象，是历史、社会、人生的百科全书。既是一本脍炙人口的儿童识字课本,同时也是一部专门论述启蒙教育的传世之作。</div>
                        </div>
                        <div class="col-xs-6 mainpic">
                            <img src="img/detail/detail-main3pic.png" alt="" class="pull-right">
                        </div>
                    </div>
                </div>
            </div>
            <!-- main4 -->
            <div class="detail-main1">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-2 col-md-offset-8  detail-main1Text">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6 mainpic ">
                            <img src="img/detail/detail-main4pic.png" alt="" class="pull-left" class=' '>
                        </div>
                        <div class="detail-main1Des col-xs-6">
                            <h1>《千字文》</h1>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Q &nbsp;&nbsp;I&nbsp;&nbsp; I &nbsp;&nbsp;A&nbsp;&nbsp; N&nbsp;&nbsp; Z&nbsp;&nbsp; I&nbsp;&nbsp; W&nbsp;&nbsp; E&nbsp;&nbsp; N</p>
                            <div class="detail-main1article">&nbsp;&nbsp;&nbsp;&nbsp; 《千字文》，蒙学经典，内容上涵盖了自然、社会、历史、伦理、教育等方面的知识，四言韵语，朗朗上口，易诵读记忆，是广为流传的儿童识字课本,也是一部简约生动的小百科全书。</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- main5 -->
            <div class="detail-main5">
                <div class="container">
                    <div class="row">
                        <div class="detail-main1Des col-xs-6">
                            <h1>艺术熏陶</h1>
                            <p> Y &nbsp;&nbsp;I&nbsp;&nbsp;S &nbsp;&nbsp;H&nbsp;&nbsp; U&nbsp;&nbsp; X&nbsp;&nbsp; U&nbsp;&nbsp;N&nbsp;&nbsp;T&nbsp;&nbsp;A&nbsp;&nbsp;O</p>
                            <br>
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <span class="detail-main5text"> 观看海量传世画作 </span>
                        <span class="detail-main5line">&nbsp;&nbsp; -------------------------------------------------------------------------</span>
                    </div>
                    <div class="row detail-main5list ">
                        <ul>
                            <li class="col-xs-3 text-center">
                                <img src="img/detail/detail-main5pic1.png" alt="">传世书法</li>
                            <li class="col-xs-3 text-center">
                                <img src="img/detail/detail-main5pic2.png" alt="">传世山水</li>
                            <li class="col-xs-3 text-center">
                                <img src="img/detail/detail-main5pic3.png" alt="">传世人物</li>
                            <li class="col-xs-3 text-center">
                                <img src="img/detail/detail-main5pic4.png" alt="">传世花鸟</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--main6 -->
            <div class="detail-main6">
                <div class="container">
                    <div class="row">
                        <div class="detail-main1Des col-xs-6">
                            <h1>精 彩 推 荐</h1>
                            <p> J &nbsp;&nbsp;I&nbsp;&nbsp;N &nbsp;&nbsp;G&nbsp;&nbsp; C&nbsp;&nbsp;A&nbsp;&nbsp; I&nbsp;&nbsp;T&nbsp;&nbsp;U&nbsp;&nbsp;I&nbsp;&nbsp;J&nbsp;&nbsp;I&nbsp;&nbsp;A&nbsp;&nbsp;N</p>
                            <br>
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-8">
                            <div>
                                <img src="img/detail/detail-main6pic1.png" alt="">
                                <span class=" detail-main6font">海量精彩视频，看个痛快</span>
                            </div>
                            <ul class="detail-main6list">
                                <li class=" detail-main6font text-right ">高山流水&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="point">••••••••••••••••••••</span>
                                </li>
                                <li class=" detail-main6font text-right">春江花月夜&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="point">••••••••••••••••••••</span>
                                </li>
                                <li class=" detail-main6font text-right">大学&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="point">••••••••••••••••••••</span>
                                </li>
                                <li class=" detail-main6font text-right">弟子规&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="point">••••••••••••••••••••</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-4">
                            <img src="img/detail/detail-main6pic2.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- main7 -->
            <div class="detail-main7">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="detail-main7font">购买咨询入口</div>
                            <img src="img/detail/detail-main7pic2.png" alt="">
                        </div>
                        <div class="col-xs-6 intro">
                            <div class="">支付入口
                                <br/>价格1980元/年</div>
                            <div class="buy-button">
                                <button class="btn btn-warning btn-lg" data-target="#buy" data-toggle="modal">购买</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- footer -->
            <div class="footer text-center">
                <div class="row">
                    <div class="declare-content"><a onclick="window.open('agreement.html')">
                            用户协议
                        </a>|<a onclick="window.open('parents_care.html')">
                            家长监护
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div>版权所有 @ 深圳市泽慧文化传播有限公司</div>
                    <div class="declare-content"><a onclick="window.open('http://www.miitbeian.gov.cn')">粤ICP备15010834号-2</a></div>
                </div>
                <div class="licenseDiv" data-target="#license" data-toggle="modal">
                    <img src="img/license.png" style="width:120px;">
                </div>
            </div>
            <!--  -->
        </div>
    </div>
    <!-- modal  buy -->
    <div class="modal fade  bs-example-modal-lg" tabindex="-1" role="dialog" id='buy'>
        <div class="modal-dialog  bs-example-modal-lg" role="document">
            <div class="modal-content register ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"> ×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal buy" role="form">
                        <div class="form-group">
                            <label class="col-sm-4 control-label"></label>
                            <label class="col-sm-6  ">国学小书童使用费</label>
                        </div>
                        <div class="row">
                            <label class="col-sm-4   control-label"></label>
                            <div class="col-sm-6">
                                <span class="Paymentmsg">
                                 &nbsp;
                                 <!-- 注册失败，请重新注册 -->
                            </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label">手机号:</label>
                            <div class="col-sm-6">
                                <input class="form-control" id="mobile" maxlength="30" name="mobile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-sm-4  control-label">支付金额:</label>
                            <label for="inputPassword" class="col-sm-6  price">1980元/年</label>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-offset-2 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" class="form-control zhuce btn btn-primary" id="payment">
                                    确认支付 &nbsp; </button>
                                <img src="img/waiting.gif" alt="" class="waiting">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>